<template>
  <div class="common-layout">
    <el-container class="bg">
      <el-header>
        <div class="ax_default box_2" />
        <!--   签约详情 表头-->
        <div class="state_text">
          <span class="text-large font-600 mr-6">签约详情</span>
          <div class="logo"></div>
        </div>
        <hr />
      </el-header>
      <el-main>
        <!-- 居民信息 -->
        <div class="info">
          <h3>居民信息</h3>
          <el-row :gutter="20">
            <el-col :span="6">
              <span
                >姓名
                <a href="#" style="color: rgb(41, 165, 251)">王安然</a></span
              ></el-col
            >
            <el-col :span="6"
              ><span>身份证 <a href="#">371456198908090543</a></span></el-col
            >
            <el-col :span="6"
              ><span>性别 <a href="#">女</a></span></el-col
            >
            <el-col :span="6"
              ><span>年龄 <a href="#">26</a></span></el-col
            >
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <span>联系电话 <a href="#">18864308600</a></span></el-col
            >
            <el-col :span="6">
              <span
                >现居地 <a href="#">怀柔区洛西县建设路青莲小区6-601</a></span
              ></el-col
            >
            <el-col :span="6"></el-col>
            <el-col :span="6">
              <span style="display: flex; align-items: center"
                >居民标签
                <div class="btn Symptom python-1">高血压</div>
                <div class="btn Symptom python-2">冠心病</div></span
              ></el-col
            >
          </el-row>
          <el-row :gutter="20">
            <el-col style="display: flex">
              <span>家庭成员 : &nbsp;</span>
              <el-card class="box-card" shadow="hover">
                <img src="./u1575.jpg" alt="用户头像" class="avatar" />
                <div>
                  <span>李清</span>48岁
                  <img
                    src="./u1576.png"
                    alt="通过状态"
                    class="state_img"
                  /><br />
                  关系: 父母
                </div>
              </el-card>
              <el-card class="box-card" shadow="hover">
                <img src="./u1581.png" alt="用户头像" class="avatar" />
                <div>
                  <span>李清</span>48岁
                  <img
                    src="./u1576.png"
                    alt="通过状态"
                    class="state_img"
                  /><br />
                  关系: 父母
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-divider />
        </div>
        <div class="info">
          <h3>签约信息</h3>
          <el-row :gutter="20">
            <el-col :span="6">
              <span
                >签约编号
                <a href="#" style="color: rgb(41, 165, 251)"
                  >20190009091</a
                ></span
              ></el-col
            >
            <el-col :span="6"
              ><span>
                签约状态
                <a href="#" style="color: #fddb78"
                  >审核通过，等待用户支付</a
                ></span
              ></el-col
            >
            <el-col :span="6"
              ><span>签约机构 <a href="#">洛西社区卫生服务站</a></span></el-col
            >
            <el-col :span="6"
              ><span>签约团队 <a href="#">李明明</a></span></el-col
            >
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <span>签约医生 <a href="#"> 李明明</a></span></el-col
            >
            <el-col :span="6">
              <span>服务包 <a href="#">老人服务包</a></span></el-col
            >
            <el-col :span="6"
              ><span>签约周期 <a href="#">1年</a></span></el-col
            >
            <el-col :span="6">
              <span
                >费用
                <a href="#">¥120</a>
              </span></el-col
            >
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <span>签约类型 <a href="#"> 首次签约</a></span></el-col
            >
            <el-col :span="6">
              <span>申请时间 <a href="#">2020/10/09 10:09:09 </a></span></el-col
            >
            <el-col :span="6"
              ><span>生效日期 <a href="#">2020/10/09</a></span></el-col
            >
            <el-col :span="6">
              <span>
                审核人
                <a href="#">王彬</a>
              </span></el-col
            >
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <span
                >审核时间 <a href="#"> 2020/10/09 10:09:09 </a></span
              ></el-col
            >
            <el-col :span="6">
              <span>签约备注 <a href="#">无</a></span></el-col
            >
          </el-row>
          <el-divider />
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="button">
              <div class="btn Symptom python python-4">编辑信息</div>
              <div class="btn Symptom python python-3">同意</div>
              <div class="btn Symptom python python-5">驳回</div>
              <div class="btn Symptom python python-6">返回</div>
            </div>
          </el-col>
        </el-row>
      </el-main>
      <el-footer style="text-align: center; color: #999"
        >@donotdog wangwangwang</el-footer
      >
    </el-container>
  </div>
</template>

<script></script>

<style>
.bg {
  background-color: #fff;
  padding: 30px;
  height: 600px;
}
.bg input {
  height: 40px;
}
.el-header {
  --el-header-height: 30px;
  height: 30px;
}
.box_2 {
  width: 6px;
  height: 20px;
  float: left;
  background-color: rgb(220, 226, 234);
  border-radius: 8px;
}
.mr-6 {
  margin-left: 1.5rem;
  font-size: 20px;
  line-height: 20px;
}
.state_text {
  display: flex;
  height: 30px;
}
.state_text > .logo {
  width: 70px;
  height: 70px;
  background: url(/src/views/contractmanage/loding.png) 48% 69% no-repeat;
  background-size: 70px;
  transform: translate(-10px, -15px);
}
hr {
  color: #eee;
  z-index: 99;
}
.el-row {
  padding: 10px;
  color: #808080;
}
.el-row span a {
  color: #000;
}
.Symptom {
  transition: 0.5s;
  background-size: 200% auto;
  margin: 0 10px;
  height: 30px;
  width: 60px;
  text-align: center;
  line-height: 30px;
}
.python {
  transition: 0.5s;
  background-size: 200% auto;
  margin: 0 10px;
  height: 60px;
  width: 100px;
  line-height: 60px;
  color: #fff;
}
.Symptom:hover {
  background-position: right center;
  transform: translateY(-5px) scale(1.1);
}
.python-1 {
  background-image: linear-gradient(
    to right,
    #f6d365 0%,
    #fda085 51%,
    #f6d365 100%
  );
  color: rgb(174, 23, 23);
}

.python-2 {
  background-image: linear-gradient(
    to right,
    #84fab0 0%,
    #8fd3f4 51%,
    #84fab0 100%
  );
  color: rgb(28, 150, 68);
}
.python-3 {
  background-image: linear-gradient(
    to right,
    #84fab0 0%,
    #8fd3f4 51%,
    #84fab0 100%
  );
}
.python-4 {
  background-image: linear-gradient(
    to right,
    #a1c4fd 0%,
    #c2e9fb 51%,
    #a1c4fd 100%
  );
}
.python-5 {
  background-image: linear-gradient(
    to right,
    #ffecd2 0%,
    #fcb69f 51%,
    #ffecd2 100%
  );
}
.python-6 {
  background-image: linear-gradient(
    to right,
    #fbc2eb 0%,
    #a6c1ee 51%,
    #fbc2eb 100%
  );
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}
.box-card {
  margin: 10px;
}
.box-card span {
  padding: 0 5px;
  font-weight: 400;
  color: #000;
  font-size: 20px;
}
.el-card__body {
  display: flex;
  width: 200px;
  height: 84px;
  color: rgb(155, 150, 150);
  align-items: center;
}
.avatar {
  width: 40px;
  margin: 7px;
}
.state_img {
  width: 9px;
  display: inline;
  height: 13px;
  transform: translate(10px, 0px) rotate(315deg);
}
.button {
  display: flex;
}
</style>
